<template>
    <div class="box">
        <el-dialog v-model="showDialog" :show-close="true" width="460px" title="公对公充值" :close-on-click-modal="false"
            :close-on-press-escape="false" @close="showDialog = false">
            <div class="content">
                <div class="fc-5E617D fs-14 mg-b-25">商户转账充值专用银行账号 (一个商户号对应一个账号)</div>
                <div class="msg mg-b-16">
                    <div class="flex flex-ai-c gap-10 fs-14 mg-b-16">
                        <div class="flex flex-ai-c flex-jc-sb w-80 fc-6B6B86">
                            <div>开</div>
                            <div>户</div>
                            <div>银</div>
                            <div>行：</div>
                        </div>
                        <div class="fc-202536 flex flex-ai-c gap-10">
                            <div>财付通-备付金账户</div><el-button v-if="CompanyInfo.merchantBankCard" size="mini" type="primary" @click="copyText">一键复制</el-button>
                        </div>
                    </div>
                    <div class="flex flex-ai-c gap-10 fs-14 mg-b-16">
                        <div class="flex flex-ai-c flex-jc-sb w-80 fc-6B6B86">
                            <div>银</div>
                            <div>行</div>
                            <div>账</div>
                            <div>户：</div>
                        </div>
                        <div class="fc-202536">{{ CompanyInfo.merchantBankCard }}</div>
                    </div>
                    <div class="flex flex-ai-c gap-10 fs-14 mg-b-16">
                        <div class="flex flex-ai-c flex-jc-sb w-80 fc-6B6B86">
                            <div>开</div>
                            <div>户</div>
                            <div>行</div>
                            <div>号：</div>
                        </div>
                        <div class="fc-202536">991584000049</div>
                    </div>
                    <div class="flex flex-ai-c gap-10 fs-14">
                        <div class="flex flex-ai-c flex-jc-sb w-80 fc-6B6B86">
                            <div>户</div>
                            <div>名：</div>
                        </div>
                        <div class="fc-202536">{{ user.companyName }}</div>
                    </div>
                </div>
                <div class="">
                    <div class="mg-b-10"><span class="fc-3876F6 mg-r-6">·</span>本次转入最高限额为2000万，转账时请勿超限;</div>
                    <div class="mg-b-10">
                        <span
                            class="fc-3876F6 mg-r-6">·</span>该账户只能通过央行大额支付系统转账，周一-周四关闭时间为17:15-20:30周五关闭时间为17:15-24:00节假日及大额支付系统关闭日不到账，其余时间可准实时到:;
                    </div>
                    <div class="mg-b-10"><span
                            class="fc-3876F6 mg-r-6">·</span>若转账金额大于5万，请在转账时选择“大额支付”、“加急”或"实时”(各银行网银系统选择的不同) </div>
                    <div class="mg-b-10"><span class="fc-3876F6 mg-r-6">·</span>若你在柜面办理，请在转账时告知银行工作人员这笔转账的开户行行号为:
                        991584000049。</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { ref, watch } from 'vue'
import clipboard from 'clipboard'
import { getCompanyInfoApi, CompanyInfoDto } from '@/api/alipay-recharge'
import user from '@/utils/user'
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    num: {
        type: [String, Number],
        default: ''
    }
})
const emit = defineEmits(['update:show'])
const CompanyInfo = ref({} as CompanyInfoDto)
const showDialog = ref(false)
const copyText = () => {
    let text = `开户银行：财付通-备付金账户;银行账户：${CompanyInfo.value.merchantBankCard};开户行号：991584000049;户名：${user.companyName}`
    clipboard.copy(text)
    ElMessage.success('复制成功')
}

watch(() => props.show, (newVal) => {
    showDialog.value = newVal
    if (newVal) {
        getCompanyInfoApi().then((res) => {
            CompanyInfo.value = res
        })
    }
}, { immediate: true })

watch(showDialog, (newVal) => {
    emit('update:show', newVal)
})

</script>
<style lang="stylus" scoped>
.msg
    width 100%
    box-sizing border-box
    background-color #f7f8fc
    border-radius 10px
    padding 14px 10px
    font-size 12px
    color #5E617D

.fc-202536
    color #202536
.fc-6B6B86
    color #6B6B86
.w-80
    width 80px
.border-none
    border none
    outline medium
    font-size 18px
.fc-5E617D
    color
.fc-9497B1
    color #9497B1
:deep() .el-dialog
    border-radius 8px
    background  linear-gradient(180deg, #D9F7F7 0%, #FFFFFF 24%) !important

.content
    width 100%
    box-sizing border-box
    border-radius 8px
    margin-top -20px
.mg-r-6
    margin-right 6px
.fc-3876F6
    color #3876F6

</style>
